<style lang="scss" scoped>
  // .info-content{
  //   background-color: #333;
  // }
  .contentScreen{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
  }
  .content {
    margin-left: 0px;
    width: 100%;
    height: 100%;
    position: relative;
    .hy-search-bar {
      position: absolute;
      top: 32px;
      width: 100%;
      z-index: 10;
      .l-btnOption{
        display: inline-block;
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
        pointer-events: auto;
        margin-top:10px;
        width:670px;
        .tool-area {
          background-color: #fff;
          border-radius: 4px;
          box-shadow: 0 0 10px rgba(0,0,0,.3);
          float: left;

          .pos-r{
            float: left;
            .ivu-btn-text{
              padding:6px 20px;
            }
          }
        }
        .search_right{
          height: 40px;
          float: right;
        }
      }
    }
  }
  /*上表格框*/
  .l-btMap-blackTop{
    background: #363f44;
    line-height: 32px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: fadeDown 0.2s .6s linear both;
    opacity: 1.0;
    z-index: 250;
  }
  .l-btMap-blackBottom{
    position: absolute;
    height:30px;
    bottom: 0;
    left: 0;
    width: 100%;
    animation: fadeDown 0.2s .6s linear both;
    opacity: 1.0;
    z-index: 250;
  }
  .l-btMap-black{
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    z-index: 202;
    width: 100%;
    box-shadow: 0 0 2px #333;
    background: #363f44;
    cursor: pointer;
    span.bgRed{
      float: left;
      color: #fff !important;
      font-size:12px;
      padding:0 20px;
      border-right: #ff595a 1px solid;
      background: #ff595a;
      height: 30px;
      cursor: pointer;
      i.bind{
        color: #fff !important;
        font-size:18px;
        font-style: normal;
        padding-left:10px;
      }
    }
    span.bgGray{
      float: left;
      color: #aaa;
      font-size:12px;
      padding:0 20px;
      height: 30px;
      border-right: 1px solid #676868;
      cursor: pointer;
      i.bind{
        font-size:18px;
        font-style: normal;
        padding-left:10px;
        color: #ff595a;
      }
    }
    span.dp{
      float: right;
      color: #aaa;
      font-size:18px;
      line-height: 30px;
      padding:0 10px;
      cursor: pointer;
    }
  }
  .infoTables{
    width: 100%;
    background: #fff;
    position: absolute;
    color: #666;
    margin-top: 30px;
    .infoTables_table{
      height: 240px;
      margin:10px;
      overflow-y: auto;
    }
    .infoTables_btm{
      border-top:1px #f1f1f1 solid;
      width:100%;
      height:30px;
      .infoTables_btm_close{
        float: right;
        color: #aaa;
        font-size:18px;
        line-height: 34px;
        padding:0 10px;
        cursor: pointer;
      }
    }
  }
  .bright{
    border-right: 1px #f1f1f1 solid;
  }
  .ivu-select-input{
    padding: 0 14px 0 8px;
    border-radius: 0px;
  }
  .l-select{
    text-align: left;
    float: left;
    width:60px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .l-Mselect{
    text-align: left;
    float: left;
    width:150px;
    border-radius: 0px;
    margin-left: -3px;
  }
  .l-search{
    float: left;
    font-size: 20px;
    padding: 0 8px;
    line-height: 30px;
    text-align: center;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    position: absolute;
  }
  .l-cityModal{
    width:360px;
    min-height:200px;
    position: absolute;
    margin-left:0;
    margin-top:32px;
    background: #fff;
    color:#666;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    border:1px #7acce6 solid;
    .tit{
      font-size:11px;
      padding:5px 10px;
      i{
        font-style: normal;
        color:#00a2d4;
        padding:0 2px;
      }
    }
    .l-cityModal-main{
      padding:5px 10px;
      a{
        margin-right:8px;
        font-size:11px;
      }
    }
  .l-cityModal-selectName{
    width:140px;
    float: right;
    margin-top:-22px;
    font-size: 12px;
  }
    .zName{
      padding:10px 10px;
      a{
        margin-right:8px;
        font-size:11px;
        float: left;
        width:15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        display: block;

      }
      a:hover{
        color: #fff;
        background: #00a2d4;
      }
    }
    .zAll{
      height:200px;
      overflow-y: auto;
    }
    .zCityZ{
      width:60px;
      color: #ccc;
      font-size:18px;
      float: left;
      line-height: 30px;
      text-align: right;
      text-align: center;
    }
    .zCity{
      width:270px;
      float: right;
      line-height: 20px;
      margin-top:5px;
      a{
        font-size:11px;
        margin-right: 8px;

      }
    }
    .zCity_p{
      width:290px;
      float: right;
      line-height: 20px;
      .tit{
        width:90px;
        float: left;
        text-align: left;
        padding:0;
      }
      .zCity-main{
        width:190px;
        float: left;
        a{
          font-size:11px;
          margin-right: 8px;

        }
      }
    }
    .select{
      padding:10px;
      font-size: 11px;
    }
  }
  .colorBlue{
    color: #00a2d4 !important;
  }
  .br{
    border-bottom: 1px #f1f1f1 solid;
  }
  .curent{
    color: #00a2d4;
  }
  /*围栏查车下拉框*/
  .l-weilanSearch_panel {
    width: 200px;
    min-height: 100px;
    position: absolute;
    margin-left: 80px;
    margin-top: 32px;
    background: #fff;
    color: #666;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border: 1px #7acce6 solid;
  }
  .l-selectDraw-list{
    width: 90px;
    min-height: 100px;
    position: absolute;
    margin-left: 220px;
    margin-top: 32px;
    background: #fff;
    color: #666;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border: 1px #7acce6 solid;
  }
  .l-pen-selectName{
    width: 180px;
    margin: 10px;
    font-size: 12px;
  }
  .l-pen-optionHot{
    margin: 0 10px 10px;
    border:1px #f1f1f1 solid;
    a{
      color: #00a2d4;
      display: block;
      padding: 3px 5px;
      font-size:11px;
    }
  }
  a.tz{
    display: block;
    width: 100%;
    font-size:11px;
    padding: 7px 16px;
  }
</style>
<template>
  <div style="width: 100%;height:100%;overflow-y:hidden;">
    <div class='content map-content'>
      <div class="l-btMap-blackTop" v-if="pointOrigin.length > 0">
        <div class="l-btMap-black clearfix">
          <span class="bgGray" @click="clickTopTableOpen(1)" :class="{bgRed: isOverSpeedOrTime == 1}">超速 {{infoBoxData.carnum}}<i class="bind">0</i></span>
          <span class="bgGray" @click="clickTopTableOpen(2)" :class="{bgRed: isOverSpeedOrTime == 2}">停车超时 <i class="bind">0</i></span>
          <span class="dp" @click="isTopTable = !isTopTable">
              <Icon v-if="!isTopTable" type="qr-scanner"></Icon>
              <Icon v-if="isTopTable" type="minus"></Icon>
          </span>
        </div>
        <div class="infoTables" v-if="isTopTable">
          <div class="infoTables_table">
            <Table :columns="topTable_columns" :data="topTable_data"></Table>
          </div>
          <div class="infoTables_btm clearfix">
            <span class="infoTables_btm_close" @click="isTopTable = !isTopTable">
              <Icon type="chevron-up"></Icon>
            </span>
          </div>
        </div>
      </div>
      <div class="l-btMap-blackBottom" id="tableBottom" v-if="pointOrigin.length > 0">
        <div class="l-btMap-black clearfix" v-if="isCarOrPoint == 1 || isCarOrPoint == 3">
          <span class="bgGray" @click="bottomTableDataChange(-1, isCarOrPoint)" :class="{bgRed: bottomTable == -1}">全部车辆 <i class="bind">{{carCount[7].length}}</i></span>
          <span class="bgGray" @click="bottomTableDataChange(4, isCarOrPoint)" :class="{bgRed: bottomTable == 4}">行驶 <i class="bind">{{carCount[4].length}}</i></span>
          <span class="bgGray" @click="bottomTableDataChange(3, isCarOrPoint)" :class="{bgRed: bottomTable == 3}">静止 <i class="bind">{{carCount[3].length}}</i></span>
          <span class="bgGray" @click="bottomTableDataChange(1, isCarOrPoint)" :class="{bgRed: bottomTable == 1}">信号中断 <i class="bind">{{carCount[1].length}}</i></span>
          <span class="bgGray" @click="bottomTableDataChange(2, isCarOrPoint)" :class="{bgRed: bottomTable == 2}">未定位 <i class="bind">{{carCount[2].length}}</i></span>
          <span class="bgGray" @click="bottomTableDataChange(5, isCarOrPoint)" :class="{bgRed: bottomTable == 5}">未绑定 <i class="bind">{{carCount[5].length}}</i></span>
          <span class="bgGray" @click="bottomTableDataChange(6, isCarOrPoint)" :class="{bgRed: bottomTable == 6}">未启用 <i class="bind">{{carCount[6].length}}</i></span>
          <span class="dp" @click="bottomTableOpen(isCarOrPoint, !isBottomTable)">
              <Icon v-if="!isBottomTable" type="qr-scanner"></Icon>
            <Icon v-if="isBottomTable" type="minus"></Icon>
          </span>
          <span class="dp" @click="tableInit()" style="padding:0;">
            <Tooltip content="初始化数据" placement="top">
              <Icon type="ios-loop-strong"></Icon>
            </Tooltip>
          </span>
        </div>
        <div class="infoTables" v-if="isBottomTable">
          <span v-if="isCarOrPoint == 2" style="display:block;margin:10px 20px;" v-show="tableOtherName">{{tableOtherName}}:</span>
          <div class="infoTables_table">
            <Table border :columns="bottomTable_columns" :data="bottomTable_data"></Table>
          </div>
          <div class="clear"></div>
          <div class="infoTables_btm clearfix">
            <div style="float: left;margin-left:10px;" v-if="isCarOrPoint == 1 || isCarOrPoint == 3">
              <!-- 分页 -->
              <Page :total="totalElement"
                    :current="searchData.pageNum"
                    size="small"
                    show-elevator
                    show-total
                    style="text-align: right;"
                    @on-change="search"
                    @on-page-size-change="pageSizeChange"
                    :page-size-opts="pageSizeOpts"
              ></Page>
            </div>
            <span class="infoTables_btm_close" @click="bottomTableOpen(1, false)">
              <Icon type="chevron-up"></Icon>
            </span>
          </div>
        </div>
      </div>
      <div class='hy-search-bar'  v-if="pointOrigin.length > 0">
        <div class="l-btnOption">
          <div class="tool-area clearfix">
            <div class="pos-r"><Button type="text" icon="ios-home" class="bright" @click="selectCity()" :class="{colorBlue: isHaveCity}">{{sCity}}</Button></div>
            <div class="pos-r"><Button type="text" icon="ios-settings-strong" class="bright" @click="penSearchOpen()" :class="{colorBlue: isHaveWeilan}">围栏查车 <Icon type="arrow-down-b"></Icon></Button></div>
            <div class="pos-r"><Button type="text" icon="ios-grid-view-outline" class="bright" :class="{colorBlue: isDrawOpen}" @click="openDraw()">画框查询 <Icon type="arrow-down-b"></Icon></Button>
            </div>
            <div class="pos-r">
              <Button type="text" icon="fork-repo" @click="startRuler()" v-show="!isRuler">开启地图测距</Button>
              <Button type="text" icon="fork-repo" @click="startRuler()" v-show="isRuler" class="colorBlue">关闭地图测距</Button>
            </div>
          </div>
          <div class="search_right clearfix">
            <i-select class="l-select"
                      v-model="selectOptionType"
                      :on-change="searchChangeClear()">
              <Option v-for="(option, index) in selectTypes" :value="option.id" :key="index">{{option.label}}</Option>
            </i-select>
            <Input class="l-Mselect" v-if="selectOptionType == 3" v-model="selectOptionCarA" placeholder="请输入地址"></Input>
            <i-select  class="l-Mselect" v-if="selectOptionType < 3" v-model="selectOptionCarB" filterable clearable>
              <i-option v-for="option in pointArrayList" :value="option.carNumber" :key="option.carNumber">{{option.carNumber}}</i-option>
            </i-select>
            <Button type="success" icon="search" @click="searchCar" class="l-search"></Button>
          </div>
          <div class="clear"></div>
          <!--选择城市选择框 -start-->
          <div class="l-cityModal" v-if="isHaveCity">
            <div class="tit">当前城市：<i>[{{sCity}}]</i></div>
            <div class="l-cityModal-main clearfix">
              <a v-for="c in hotCity" @click="selectCityConfirm(c.name)">{{c.name}}</a>
              <div class="clear"></div>
            </div>
            <div class="select">
              <ButtonGroup size="small">
                <Button type="ghost" class="btns" @click="switchPOrCBtn(1)" :class="{curent: isProvinceOrCity == 1}">按省份</Button>
                <Button type="ghost" @click="switchPOrCBtn(2)" :class="{curent: isProvinceOrCity == 2}">按城市</Button>
              </ButtonGroup>
              <div class="clear"></div>
              <i-select v-model="selectCityInput" filterable  size="small"  class="l-cityModal-selectName" @on-change="changeCityCount(selectCityInput)" placeholder="输入城市搜索">
                <i-option v-for="city in originCity" :value="city.name" :key="city.name" :label="city.name">{{city.name}}</i-option>
              </i-select>
              <div class="clear"></div>
              <!--按省份-->
              <div v-show="isProvinceOrCity == 1">
                <div class="zName clearfix">
                  <a v-for="p in letters01" :href='`#`+p+`1`'>{{p}}</a>
                </div>
                <div class="br"></div>
                <div class="zAll">
                  <div class="zMain clearfix" v-for="c in dealCityArray01">
                    <div class="zCityZ" :id="c.initial+`1`" style="width:30px;">{{c.initial}}</div>
                    <div class="zCity_p" v-for="cn in c.content">
                      <div class="tit">
                        <a>{{cn.province}}:</a>
                      </div>
                      <div class="zCity-main">
                        <a v-for="city in cn.city" @click="selectCityConfirm(city.name)" :key="city.id">{{city.name}}</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--按城市-->
              <div v-show="isProvinceOrCity == 2">
                <div class="zName clearfix">
                  <a v-for="p in letters02" :href='`#`+p+`2`'>{{p}}</a>
                </div>
                <div class="br"></div>
                <div class="zAll">
                  <div class="zMain clearfix" v-for="c in dealCityArray02">
                    <div class="zCityZ"  :id="c.initial+`2`">{{c.initial}}</div>
                    <div class="zCity">
                      <a v-for="cn in c.content" @click="selectCityConfirm(cn.name)" :key="city.id">{{cn.name}}</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="clear"></div>
          <!--选择围栏 -end-->
          <div class="l-weilanSearch_panel" v-if="isHaveWeilan">
            <i-select v-model="selectPenInput" filterable  size="small"  class="l-pen-selectName" @on-change="changePenCount(selectPenInput)" placeholder="输入围栏名称搜索">
              <i-option v-for="pen in penSelectList" :value="pen.id" :key="pen.id">{{pen.name}}</i-option>
            </i-select>
            <div class="l-pen-optionHot">
              <a @click="selectPenConfirm(pen)" v-for="pen in penList">{{pen.name}}</a>
            </div>
          </div>
          <!--选择画框类型 -end-->
          <div class="l-selectDraw-list" v-if="isDrawOpen">
            <a v-for="type in drawSelectType" class="tz" @click="drawingRectangleOpen(type.label)">{{type.label}}</a>
          </div>
        </div>
      </div>
      <div id='container' class='autoHeight'></div>
      <div style="display:none;">
        <infoBox v-model="showInfoBox" :infoBoxData="infoBoxData" ref="renderAfter"></infoBox>
      </div>
    </div>

  </div>
</template>

<script>
  import BMap from 'BMap';
  import BMapLib from 'BMapLib';
  import service from './service';
  import list from '@/js/mixins/list';
  import HyFormItem from '@/components/common/formItem/formItem.vue';
  import HyDetail from '@/components/common/detail/detail.vue';
  import infoBox from './InfoBox.vue';

  export default {
    components: {
      HyDetail,
      HyFormItem,
      infoBox
    },
    mixins: [list],
    data () {
      return {
        showInfoBox: false,
        map: null,           // 地图
        mapMarker: null,     // 标记
        pointOrigin: [], // 原始数据
        drawPoints: [], // 画框总数据
        pointArrayList: [], // 模糊搜索车辆
        intervalid: null,     // 定时任务
        hotCity: [],
        isHaveCity: false, // 城市选择出现框控制
        isRuler: false,
        isScan: false,
        myDis: null,
        selectTypes: [],
        selectOptionCar: '',
        selectOptionCarA: '',
        selectOptionCarB: '',
        selectOptionType: 1,
        sCity: '重庆', // 查询城市字段
        letters01: [], // 字母集合 -按省份
        letters02: [], // 字母集合 -按城市
        isProvinceOrCity: 1,  // 1省2城
        dealCityArray01: [], // 可选择对象集合-按省份
        dealCityArray02: [], // 可选择对象集合 -按城市
        provinces: [], // 中国所有省份
        originCity: [], // 原始城市集合，用于选择城市里的模糊搜索框
        selectCityInput: '', // 选择城市里的模糊搜索框
        drawingManager: null,
        drawSelectType: [],
        isHaveWeilan: false, // 围栏查车出现框控制
        selectPenInput: null, // 选择围栏里的模糊搜索框
        PenCurrent: '', // 当前选择的围栏名称
        penList: [], // 围栏列表
        penSelectList: [], // 围栏列表
        topTable_columns: [],
        topTable_data: [],
        isTopTable: false, // 是否显示顶部table
        isOverSpeedOrTime: 1, // 超时超速表格
        bottomTable_columns: [],
        bottomTable_data: null,
        isBottomTable: false, // 是否显示顶部table
        bottomTable: -1, // -1 全部 0无法定位 1信号中断 2未定位 3静止 4行驶 5未绑定 6未启用
        carCount: [[], [], [], [], [], [], [], []],
        isCarOrPoint: 1, // 1车辆 2其他 3che
        tableOtherName: '', // 其他列表命名
        isDrawOpen: false, // 围栏查车出现框控制
        name: '',
        bottomDatas: [], // 列表所有数据综合
        loading: false,
        gpsList: '', // 所有的设备名称集合
        searchData: {},
        infoBoxData: {},
        carTableTitle: [
          {title: '车牌号', key: 'carNumber', width: 150},
          {title: '设备号', key: 'gpsno', width: 150},
          {title: '状态', key: 'statusType', width: 150},
          {title: '所属机构', key: 'orgName', width: 150},
          {title: '司机名 ', key: 'chauffeurName', width: 150},
          {title: '离线时间', key: 'duration', width: 150},
          {title: '车速', key: 'speed', width: 150},
          {
            title: 'ACC状态',
            width: 120,
            render: (h, params) => {
              return (this.accStatus(params.row.acc));
            }
          },
          {title: '经度', key: 'lng', width: 150},
          {title: '纬度', key: 'lat', width: 150},
          {
            title: '操作',
            key: 'action',
            width: 180,
            fixed: 'right',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                this._hyTool.createIconBtn(h, params, this.routeToFellow, '车辆跟踪', 'navigate', 16, {color: '#19be6b'}),
                this._hyTool.createIconBtn(h, params, this.routeToHistory, '轨迹回放', 'play', 16, {color: '#2d8cf0'})
              ]);
            }
          }
        ]
      };
    },
    mounted () {
      this.init();
    },
    methods: {
      remoteMethod () {
      },
      // ------------------ 选择城市 -----------------
      // ------------------ ------ -----------------
      // 搜索打开初始化查询展示事件
      async selectCity () {
        this.isRuler = false;
        this.isHaveWeilan = false;
        this.isDrawOpen = false;
        this.isHaveCity = !this.isHaveCity;
        if (this.isHaveCity) {
          let query = {
            pageNum: 1,
            pageSize: 5000,
            level: 3
          };
          let result = await service.getArea(query);
          let array = result.data && result.data.content || []; // 原始未处理数据 -城市
          this.originCity = array;
          query.level = 2;
          let resultB = await service.getArea(query);
          let arrayB = resultB.data && resultB.data.content || []; // 原始未处理数据 -省份
          let ret = array.filter((i) => {
            return i.hotSpot === 1;
          });
          this.hotCity = ret;
          this.letters01 = ['A', 'F', 'G', 'H', 'J', 'L', 'N', 'Q', 'S', 'T', 'X', 'L', 'Z'];
          this.letters02 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'];
          this.provinces = ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行>政区', '澳门特别行政区'];
          // 按省份组装数组
          this.letters01.forEach((i) => {
            let arrA = arrayB.filter((q) => {
              return q.initial === i;
            });
            // 找出省份下的所有城市
            let sc = []; // 省份的城市集合
            arrA.forEach((w) => {
              let arrCity = array.filter((q) => {
                return q.province === w.name;
              });
              let s = {province: w.name, city: arrCity};
              sc.push(s);
            });
            let ipc = {initial: i, content: sc};
            this.dealCityArray01.push(ipc); // 省份按字母展示
          });
          // 按城市组装数组
          this.letters02.forEach((i) => {
            let arrB = array.filter((q) => {
              return q.initial === i;
            });
            let s = {initial: i, content: arrB};
            this.dealCityArray02.push(s); // 城市按字母展示
          });
        }
      },
      // 确定选择
      selectCityConfirm (city) {
        this.clearMap();
        this.isBottomTable = false;
        this.bottomTableOpen(1, false);
        this.isHaveCity = false;
        this.sCity = city; // 选择城市
        this.map.centerAndZoom(city, 12);
        this.map.setCurrentCity(city);
      },
      // 切换按钮 -按城市-按省份
      switchPOrCBtn (type) {
        this.isProvinceOrCity = type;
      },
      // 城市搜索输入框 change事件
      changeCityCount (value) {
        if (value) this.selectCityConfirm(value);
      },
      // ------------------ 地图测距 -----------------
      // ------------------ ------ -----------------
      // 地图测距
      startRuler () {
        this.isRuler = !this.isRuler;
        this.isHaveCity = false;
        this.isHaveWeilan = false;
        this.isDrawOpen = false;
        if (this.isRuler) {
          this.myDis.open();  // 开启鼠标测距
        } else {
          this.myDis.close();  // 关闭鼠标测距
        }
      },
      // ------------------ 画框查询 -----------------
      // ------------------ ------ -----------------
      drawingRectangleOpen (name) {
        this.isHaveCity = false;
        this.isRuler = false;
        this.isHaveWeilan = false;
        this.isDrawOpen = false;
        this.clearMap();
        this.drawingManager.open();
        this.drawingManager.setDrawingMode('rectangle');
        this.name = name;
      },
      openDraw () {
        this.isDrawOpen = !this.isDrawOpen;
        this.isRuler = false;
        this.isHaveCity = false;
        this.isHaveWeilan = false;
      },
      // ------------------ 围栏查车 -----------------
      // ------------------ ------ -----------------
      async penSearchOpen () {
        this.isHaveCity = false;
        this.isRuler = false;
        this.isDrawOpen = false;
        this.isHaveWeilan = !this.isHaveWeilan;
        if (this.isHaveWeilan) {
          await service.getLabels({paling: 0, pageNum: 1, pageSize: 100}).then((result) => {
            this.penList = result.data && result.data.content || [];
            this.penSelectList = this.penList;
            // console.log(result.data);
          });
        }
      },
      // 城市搜索输入框 change事件
      async changePenCount (id) {
        if (id) {
          let value;
          await service.getLabels({id: id, pageNum: 1, pageSize: 10}).then((result) => {
            value = result.data && result.data.content[0] || [];
          });
          this.selectPenConfirm(value);
        }
      },
      selectPenConfirm (pen) {
        this.sCity = pen.city;
        this.PenCurrent = pen;
        this.isHaveWeilan = false;
        this.clearMap();
        let _this = this;
        let mPoint;
        // 窗口信息
        if (pen.scopeType === '圆形') {
          let arr = pen.point.split(',');
          mPoint = new BMap.Point(arr[0], arr[1]);
          this.map.centerAndZoom(mPoint, 15);
          let circle = new BMap.Circle(mPoint, 1000, {fillColor: pen.color, strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3});
          _this.map.addOverlay(circle);
          let local = new BMap.LocalSearch(_this.map, {renderOptions: {map: _this.map, autoViewport: false}});
          local.searchNearby(mPoint);
        }
        if (pen.scopeType === '多边形') {
          let pos = pen.point;
          let arr = pos.split('|');
          let points = [];
          let x = arr[0].split(',')[0];
          let y = arr[0].split(',')[1];
          arr.forEach(i => {
            // 获取中心点
            x = (x * 1 + i.split(',')[0] * 1) * 0.5;
            y = (y * 1 + i.split(',')[1] * 1) * 0.5;
            let a = new BMap.Point(i.split(',')[0], i.split(',')[1]);
            points.push(a);
          });
          mPoint = new BMap.Point(x, y);
          this.map.centerAndZoom(mPoint, 15);
          let polygon = new BMap.Polygon(points, {strokeColor: pen.color, strokeWeight: 3, strokeOpacity: 0.5, fillOpacity: 0.7});
          this.map.addOverlay(polygon);
        }
        let marker = new BMap.Marker(mPoint); // 中心点
        this.map.addOverlay(marker);
        let label = new BMap.Label(pen.name, {offset: new BMap.Size(20, 20)});
        marker.setLabel(label);
        this.showPenInfo(pen, marker, mPoint);
      },
      // 围栏窗体信息
      showPenInfo (result, marker, point) {
        console.log(result);
        let info = [];
        info.push('<div style=\'color:#666;font-size:11px;line-height:20px;\'>标注名称 :<b>' + result.name + '</b>');
        info.push();
        info.push('标注类型 : ' + result.labelState);
        info.push('所属机构 : ' + result.org.name);
        info.push('地&emsp;&emsp;址 : ' + result.address);
        info.push('备&emsp;&emsp;注 :' + result.remark + '</div>');
        let infoW = new BMap.InfoWindow(info.join('<br/>'));
        // 设置围栏详情偏移
        marker.setOffset(new BMap.Size(0, 25));
        // 创建信息窗口对象
        this.map.openInfoWindow(infoW, point);
        marker.addEventListener('click', function (e) {
          this.map.openInfoWindow(infoW, point);
        });
      },
      clearMapModal () {
        this.isDrawOpen = false;
        this.isHaveWeilan = false;
        this.isHaveCity = false;
      },
      // 初始化地图
      async init () {
        this.selectTypes = [
          {id: 1, label: '车辆'},
          {id: 2, label: '别名'},
          {id: 3, label: '地址'}
        ];
        // 画框查车类型
        this.drawSelectType = [
          {id: 1, label: '车辆'},
          {id: 2, label: '高速路口'},
          {id: 3, label: '停车场'},
          {id: 4, label: '加油站'},
          {id: 5, label: '服务区'}
        ];
        this.topTable_columns = [
          {title: '车牌号', key: 'carNumber', width: 120},
          {title: '设备号', key: 'gpsno', width: 120},
          {title: '状态', key: 'statusType', width: 120},
          {title: '所属机构', key: 'orgName', width: 120},
          {title: '司机名 ', key: 'chauffeurName', width: 120},
          {title: '离线时间', key: 'duration', width: 120},
          {title: '车速', key: 'speed', width: 120},
          {
            title: 'ACC状态',
            width: 120,
            render: (h, params) => {
              return (this.accStatus(params.row.acc));
            }
          },
          {title: '经度', key: 'lng', width: 120},
          {title: '纬度', key: 'lat', width: 120},
        ];
        this.map = new BMap.Map('container', {enableMapClick: false});
        this.map.centerAndZoom(new BMap.Point(106.530635013, 29.5446061089), 12);  // 初始化重庆地图
        this.map.addEventListener('click', () => {
          // 清除地图上弹出层
          this.clearMapModal();
        });
        this.sCity = '重庆'; // 选择城市
        this.map.setCurrentCity('重庆');
        this.map.enableScrollWheelZoom();
        this.map.addControl(new BMap.NavigationControl({
          offset: new BMap.Size(5, 80)
        })); // 平移控件
        this.myDis = new BMapLib.DistanceTool(this.map); // 测距
        let styleOptions = {
          strokeColor: '#c459fa',
          fillColor: '#c459fa',
          strokeWeight: 3,
          strokeOpacity: 0.8,
          fillOpacity: 0.6,
          strokeStyle: 'solid'
        };
        this.drawingManager = new BMapLib.DrawingManager(this.map, {
          isOpen: false, // 是否开启绘制模式
          enableDrawingTool: false, // 是否显示工具栏
          drawingToolOptions: {
            anchor: 0, // 位置
            offset: new BMap.Size(15, 35)  // 偏离值
          },
          drawingTypes: 'rectangle',
          rectangleOptions: styleOptions // 矩形的样式
        });
        let overlays = [];
        let _this = this;
        await this.initGps();
        this.intervalInitGps();
        this.drawingManager.addEventListener('overlaycomplete', function (e) {
          _this.bottomTable_columns = [];
          _this.bottomTable_data = [];
          // this.clearMap();
          overlays.push(e.overlay);
          let path = e.overlay.getPath();
          let bs = new BMap.Bounds(path[3], path[1]);
          if (_this.name === '车辆') {
            let result;
            let arr = [];
            let pt;
            _this.pointOrigin.forEach(item => {
              pt = new BMap.Point(item.lng, item.lat);
              result = BMapLib.GeoUtils.isPointInRect(pt, bs);
              if (result) arr.push(item);
            });
            _this.bottomTable_columns = _this.carTableTitle;
            _this.bottomTable_data = [];
            _this.isCarOrPoint = 3;
            let bTable = document.getElementById('tableBottom');
            _this.isBottomTable = true;
            _this.bottomTable = -1;
            bTable.style.height = '300px';
            _this.tableOtherName = '';
            _this.carCount = [[], [], [], [], [], [], [], []];
            if (arr.length > 0) {
              for (let j = 0; j < 7; j++) {
                _this.carCount[j] = arr.filter((i) => {
                  return i.status === j;
                });
              };
              _this.carCount[7] = arr;
              _this.drawPoints = arr;
              _this.bottomTableDataChange(-1, 3);
              _this.addMarker(arr);
            };
          } else {
            let __this = _this;
            let local = new BMap.LocalSearch(_this.map, {
              renderOptions: {map: _this.map},
              onSearchComplete: async function (result) {
                let temp = result.zr;
                __this.bottomTable_columns = [
                  {title: '序号', key: 'index'},
                  {title: '名称', key: 'title'},
                  {title: '地址', key: 'address'},
                  {title: '城市', key: 'city'}
                ];
                let abcd = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                abcd = abcd.split('');
                temp.forEach((item, i) => {
                  __this.bottomTable_data.push(
                    {title: item.title, address: item.address, city: item.city, index: abcd[i]}
                  );
                });
                __this.isCarOrPoint = 2;
                let bTable = document.getElementById('tableBottom');
                __this.isBottomTable = true;
                bTable.style.height = '340px';
                __this.tableOtherName = _this.name;
              }
            });
            local.searchInBounds(_this.name, bs);
          }
          if (path.length > 0) {
            _this.drawingManager.close(); // 关闭绘画
            for (let i = 0; i < overlays.length; i++) {
              _this.map.removeOverlay(overlays[i]);
            }
            overlays.length = 0;
          }
        });
      },
      // 轨迹回放
      routeToHistory (row) {
        this.$router.push({path: '/position/historyTrack', query: {plateNum: row.carNumber, gpsno: row.gpsno}});
      },
      // 轨迹跟踪
      routeToFellow (row) {
        this.$router.push({path: '/position/realTime', query: {plateNum: row.carNumber, gpsno: row.gpsno}});
      },
      // 清除地图
      clearMap () {
        this.map.clearOverlays();
      },
      // ------------------ 顶部/底部表格 -----------------
      // ------------------ ------ -----------------
      // 切换车辆数据以及读取
      bottomTableDataChange (status, isCarOrPoint) {
        if (isCarOrPoint * 1 === 3) {
          if (this.intervalid) {
            clearInterval(this.intervalid);
          }
        }
        this.isBottomTable = true;
        this.bottomTable = status;
        let bTable = document.getElementById('tableBottom');
        if (this.isBottomTable) {
          bTable.style.height = '320px';
        } else {
          bTable.style.height = '32px';
        }
          this.bottomTable_columns = this.carTableTitle
          let gps = [];
          // 初始查询
          if (isCarOrPoint === 1) {
            this.pointOrigin.forEach(item => {
                if (status === -1) {
                  gps.push(item.gpsno);
                } else {
                  if (item.status === status) {
                    gps.push(item.gpsno);
                  }
                };
            });
          };
          if (isCarOrPoint === 3) {
            // 画框查询
            this.drawPoints.forEach((item, index) => {
              if (status === -1) {
                gps.push(item.gpsno);
              } else {
                if (item.status === status) {
                  gps.push(item.gpsno);
                }
              };
            });
          }
          if (gps.length < 1) {
              this.bottomTable_data = [];
              this.gpsList = '';
          } else {
            this.gpsList = gps.join(',');
            this.initGpsDetail();
          };
      },
      clickTopTableOpen (type) {
        this.isOverSpeedOrTime = type;
        this.isTopTable = !this.isTopTable;
      },
      bottomTableOpen (isCarOrPoint, status) {
        let px;
        this.isCarOrPoint = isCarOrPoint;
        this.isBottomTable = status;
        let bTable = document.getElementById('tableBottom');
        if (this.isBottomTable) {
          if (this.isCarOrPoint === 1) px = '320px';
          if (this.isCarOrPoint === 2) px = '340px';
          if (this.isCarOrPoint === 3) px = '300px';
          bTable.style.height = px;
        } else {
          bTable.style.height = '32px';
        }
      },
      // 全屏切换
      scanner () {
        this.isScan = !this.isScan;
        let container = document.getElementById('container');
        if (this.isScan) {
          container.className = 'contentScreen';
        } else {
          container.className = 'contentScreen';
        }
      },
      // 搜索
      async searchCar () {
        if(!this.selectOptionCarB){
          this.$Notice.warning({
              title: '提示信息',
              desc: '请输入查询信息'
          });
          return;
        };
        if (this.selectOptionCarA) this.selectOptionCar = this.selectOptionCarA;
        if (this.selectOptionCarB) this.selectOptionCar = this.selectOptionCarB;
        if (this.intervalid) clearInterval(this.intervalid);
        // 定时查询实时位置
          let pointData = this.pointOrigin.filter((i) => {
            return i.carNumber === this.selectOptionCar;
          });
          if (pointData.length) {
            // this.map.centerAndZoom(new BMap.Point(pointData[0].lng, pointData[0].lat), 15);  // 中心点
            this.map.setViewport([new BMap.Point(pointData[0].lng, pointData[0].lat)]);
            let point = new BMap.Point(pointData[0].lng, pointData[0].lat);
            // 图片大小
            let iconSize = new BMap.Size(43, 20);
            let myIcon = new BMap.Icon('/static/images/car.png', iconSize);
            let marker = new BMap.Marker(point, {icon: myIcon});
            this.clearMap();
            this.map.addOverlay(marker);
            // // 添加点击事件
            this.showInfoWindow(pointData[0], marker);
          }
      },
      searchChangeClear () {
        this.selectOptionCar = '';
        this.selectOptionCarA = '';
        this.selectOptionCarA = '';
      },
      async tableInit () {
          await this.initGps();
          this.intervalInitGps();
      },
      // 获取车辆实时数据-gpsDetail
      async intervalInitGps () {
        // 定时查询实时位置
        await this.initGpsDetail();
        if (this.intervalid) clearInterval(this.intervalid);
      },
      async initGpsDetail () {
        let result;
        let option
        if (this.bottomTable > -1) {
          option = {
            gpsno: this.gpsList,
            pageNo: this.searchData.pageNum,
            pageSize : this.searchData.pageSize,
            sortColumns : 'carnum asc',
            status: this.bottomTable
          };
        } else {
          option = {
            gpsno: this.gpsList,
            pageNo: this.searchData.pageNum,
            pageSize : this.searchData.pageSize,
            sortColumns : 'carnum asc'
          };
        }
        result = await service.getCurrentGpsDetail(option);
        this.bottomTable_data = result.data && result.data.content || []; // 所有
        console.log('----------');
        console.log(this.bottomTable_data);
        console.log('----------');
        if (this.bottomTable_data.length > 0) {
          this.bottomTable_data.forEach((item, index) => {
            this.bottomTable_data[index].statusType = this.filterStatus(item.status);
          });
          this.addMarker(this.bottomTable_data);
        }
      },
      async initGps () {
        let result;
        let gps = [];
        result = await service.getCurrentGps();
        let points = result.data || []; // 所有
        if (points.length > 0) {
          points.forEach((item, index) => {
            gps.push(item.gpsno);
          });
          this.pointOrigin = points; // 原始数据
          this.pointArrayList = points;
          this.gpsList = gps.join(',');
          for (let j = 0; j < 7; j++) {
            this.carCount[j] = points.filter((i) => {
              return i.status === j;
            });
          }
          this.carCount[7] = points;
          this.addMarker(points);
        }
      },
      pageSizeChange (pageSize) {
        this.searchData.pageSize = pageSize;
        console.log(this.searchData.pageSize + '111');
        this.initGpsDetail();
      },
      currentChange (val) {
        this._hyTool.csl(true);
        this.searchData.pageNum = val;
        // 获取列表);
      },
      // 地图渲染
      addMarker (data) {
        let markers = [];
        // 图片大小
        let iconSize = new BMap.Size(43, 20);
        let anchorSize = new BMap.Size(16, 20);
        // 指定定位位置
        let myIcon = new BMap.Icon('/static/images/car.png', iconSize);
        for (let value of data) {
             let point = new BMap.Point(value.lng, value.lat);
             let marker = new BMap.Marker(point, {icon: myIcon});
             // 添加点击事件
            marker.addEventListener('click', () => {
              this.showInfoWindow(value, marker);
            });
             markers.push(marker);
        }
        // 添加聚合点
        this.addCluster(markers);
      },
      // 添加聚合点
      addCluster (markers) {
        return new BMapLib.MarkerClusterer(this.map, {markers: markers});
      },
      async showInfoWindow (result, marker) {
        if(result.gpsno === null){
          this.$Notice.error({
              title: '提示信息',
              desc: 'gpsno为空'
          });
          return;
        }
        // 清空infobox
        let infoBoxDom = document.querySelector('.infoBox');
        if(infoBoxDom !== null){
          infoBoxDom.remove();
        }
        // 获取设备详情
        let opt = {
          gpsno: result.gpsno,
          pageNo: 1,
          pageSize: 1,
        };
        let resultDetailData = null;
        // 获取车辆设备详情
        resultDetailData = await service.getCurrentGpsDetail(opt);
        this.infoBoxData = resultDetailData.data.content[0];
        let el = await this.$refs.renderAfter.renderComplete();
        let infoBox = new BMapLib.InfoBox(this.map, el, {
          closeIconUrl: '/static/images/close.png' //关闭图片
          ,offset:new BMap.Size(0, 16) //偏移
          ,enableAutoPan: true //启用自动平移
          ,align: INFOBOX_AT_TOP //顶部打开
        });
        infoBox.open(marker);
      },
      // 车辆状态
      filterStatus (val) {
        let strInfo = '';
        switch (val) {
          case 0:
            strInfo = '无法定位';
            break;
          case 1:
            strInfo = '信号中断';
            break;
          case 2:
            strInfo = '未定位';
            break;
          case 3:
            strInfo = '车辆静止';
            break;
          case 4:
            strInfo = '车辆运动中';
            break;
          case 5:
            strInfo = '未绑定';
            break;
          case 6:
            strInfo = '未启用';
            break;
        }
        return strInfo;
      },
      // 车辆状态
      accStatus (val) {
        let strInfo = '';
        switch (val) {
          case -1:
            strInfo = '无此数据';
            break;
          case 0:
            strInfo = 'ACC关';
            break;
          case 1:
            strInfo = 'ACC开';
            break;
        }
        return strInfo;
      },
      beforeDestroy () {
        // 清除定时任务
        clearInterval(this.intervalid);
      }
    }
  };
</script>
